<template>
  <div>
      <el-card id="mycard" class="box-card">
          <div slot="header" class="clearfix">
            <span>请登录</span>
          </div>
          <el-form
          :model="login" 
          :rules="rules" 
          ref="form" 
          label-width="100px" 
          class="demo-ruleForm"
          @keyup.enter.native="loginform"
          >
            <el-form-item label="用户名" prop="username">
    <el-input v-model="login.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="login.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="loginform()">登录</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
        </el-form>
      </el-card>
      
  </div>
</template>

<script>
import { mapMutations,mapGetters } from 'vuex'
export default {
    name: 'Login',
    data(){
        return {
            login: {
                username: '',
                password: ''
            },
            rules:{
                username:[
                    {required: true,message:'用户名不能为空',trigger: 'blur'},
                    {min:1,max:50,message:'用户名长度在1-100之间',trigger:'blur'}
                ],
                password:[
                    {required: true,message:'密码不能为空',trigger: 'blur'},
                    {min:1,max:50,message:'密码长度在1-100之间',trigger:'blur'}
                ]
            }
        }
    },
    methods:{
        loginform(){
            this.$refs['form'].validate((valid) => {
          if (valid) {
              
            this.axios.post('/ums-user/login',response => {
                
                //登录之后转到成功页面
                if(response.code===200)
                {
                    this.axios.setToken(response.obj)
                    this.setToken(response.obj)
                    this.$router.push({
                        path:'/'
                    })
                }
                
            },this.login)
          } 
        })
            
        },
        ...mapMutations(['setToken'])
    
    }
}
</script>

<style>
#mycard{
border-radius: 30px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin: 0 auto;
width: 500px;
height: 280px;
}
</style>